<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            color: red;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g";
        // 配置地图地形
        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false, //  隐藏默认的地图按钮，否则会影响新地图的加载
            terrainProvider: new Cesium.CesiumTerrainProvider({  // 加载地形数据，搜索 珠穆朗玛峰,查看山川地形效果
                url: Cesium.IonResource.fromAssetId(1),
                requestVertexNormals: true,   // 设置为true,可以增加法线，用于提高光照效果，
                requestWaterMask: true,   // 设置为true,可以增加水面特效
            }),
        });
        // 设置相机位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0), // 目的地位置
            orientation: {  // 设置相机视口的方向
                heading: Cesium.Math.toRadians(0),  // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
                pitch: Cesium.Math.toRadians(-90.0),  // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
                roll: 0.0   // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
            }
        })
        const position = new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)

        // 空间数据管理
        // 空间数据管理是三维场景开发的主要内容,其包含对数据的创建、增加、修改、删除等
        // add 添加几何图形
        // remove 删除几何图形
        // getById 修改几何图形
        // removeAll 快速清空场景

        // 加载一个几何图形
        // const redPolygon = viewer.entities.add({
        //     polygon:{  // 创建一个多边形
        //         hierarchy:new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.39,39.915,116.395,39.91]), // 多边形的位置信息，这里录入3个经纬度坐标，绘制一个三角形，fromDegreesArray方法就是让我们录入多个点的位置信息，Cesium则在底层将各个点连接起来，组成一个多边形
        //         material:new Cesium.Color(0,0,1,1), // 设置材质颜色
        //     }
        // })

        // 面中填充图片
        // const entity = viewer.entities.add({
        //     position: position,
        //     plane: {
        //         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0), // 设置面的朝向,设置为沿着Z轴平铺，轴向需要参考笛卡尔坐标，如果想让图形竖立起来，将Z轴平铺改为X轴平铺即可(Cesium.Cartesian3.UNIT_X)
        //         dimensions: new Cesium.Cartesian2(400, 300), // 设置面的长度和宽度
        //         // material: new Cesium.Color(0,0,1,0.5), //材质颜色设置为红色，不透明度为0.5
        //         material: './img/img1.png', // 这里是支持填充图片的
        //         outline: true, // 设置是否显示边框
        //         outlineColor: Cesium.Color.BLACK, // 将边框的颜色设置为黑色
        //     }
        // })

        // 加载多边形
        const redPolygon = viewer.entities.add({
            polygon:{  // 创建一个多边形
                hierarchy:new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.39,39.915,116.395,39.91]), // 多边形的位置信息，这里录入3个经纬度坐标，绘制一个三角形，fromDegreesArray方法就是让我们录入多个点的位置信息，Cesium则在底层将各个点连接起来，组成一个多边形
                material:new Cesium.Color(1,0,0,1), // 设置材质颜色
                extrudedHeight:200, // extrudedHeight属性让多边形垂直方向拉伸，绘制多边形时使用，平面不可使用
            }
        })

        const bluePolygon = viewer.entities.add({
            id:'bluePolygon',
            polygon:{  // 创建一个多边形
                hierarchy:new Cesium.Cartesian3.fromDegreesArray([116.38,39.92,116.38,39.915,116.40,39.92]), // 多边形的位置信息，这里录入3个经纬度坐标，绘制一个三角形，fromDegreesArray方法就是让我们录入多个点的位置信息，Cesium则在底层将各个点连接起来，组成一个多边形
                material:new Cesium.Color(0,0,1,1), // 设置材质颜色
                extrudedHeight:200, // extrudedHeight属性让多边形垂直方向拉伸，绘制多边形时使用，平面不可使用
            }
        })

        const yellowPolygon = viewer.entities.add({
            polygon:{  // 创建一个多边形
                hierarchy:new Cesium.Cartesian3.fromDegreesArray([116.375,39.905,116.37,39.915,116.375,39.92]), // 多边形的位置信息，这里录入3个经纬度坐标，绘制一个三角形，fromDegreesArray方法就是让我们录入多个点的位置信息，Cesium则在底层将各个点连接起来，组成一个多边形
                material:new Cesium.Color(0,1,0,1), // 设置材质颜色
                extrudedHeight:200, // extrudedHeight属性让多边形垂直方向拉伸，绘制多边形时使用，平面不可使用
            }
        })

        // remove 删除指定的几何体
        // viewer.entities.remove(yellowPolygon)

        // getById 修改几何体
        // 给几何体加一个id属性
        viewer.entities.getById('bluePolygon').polygon.material = new Cesium.Color(1,0,1,0.5) // 修改id为bluePolygon几何体的材质颜色

        // removeAll 快速清空场景,清空所有加载的实体
        // viewer.entities.removeAll()

    </script>
</body>

</html>